<template>
    <div class="card">
        <!-- {{this.cardData}} -->
        <div class="block">
            <div v-if="this.cardData == ''" class="noEquipment"> 
                该项绑定设备未开启
            </div>
            <el-carousel trigger="click" class="card_hight" :autoplay="false"  :initial-index="cardData.index">
            <el-carousel-item v-for="item in cardData.unit" :key="item.index">
                <!-- 设备标题 -->
                 <router-link to="/overview">
                    <h4 class="normal" @click="router('xtg402',item)" :title="item.name">
                        <!-- <svg class="icon card_icon" aria-hidden="true">
                            <use xlink:href="#icon-jiedian"></use>
                        </svg> -->
                        <img class="title_icon" src="../../assets/title.png" alt />
                        {{item.typename}}:&nbsp;{{item.name}}
                    </h4>
                 </router-link>
                <!-- 卡片内容 -->
                <div class="card_padding">
                    <div v-for="item2 in item.unit" :key="item2.index">
                        <div class="item" v-show="item2.ready == 1">
                            <div class="overflowHidden">
                                {{item2.name}}
                            </div>
                            <el-switch
                                @change="changeSt(item2.id , item2.value ,item.serial)"
                                v-model="item2.value"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                            </el-switch>
                        </div>
                    </div>
                </div>
                
            </el-carousel-item>
            </el-carousel>
        </div>
        
    </div>
</template>

<script>
export default {
    props: ['nowIndex', 'nowId'],

    data () {
        return{
        }
    },
    created() {
        
    },
    methods: {
        // 跳转
        router(val,item){
            var arr = {
                addr:item.addr,
                name:item.name,
                type:item.type,
                uid:item.uid
            }
            localStorage.setItem("当前设备编号", JSON.stringify(arr))
            localStorage.setItem("menuRouter", val)
        },
        // 数据下发
        changeSt(id, val,serial) {
            // var st = val == true ? 1 : 0
            // // 存缓存
            // var data = JSON.parse(localStorage.getItem("cardData"));
            // console.log(serial)
            // data["xtg402"][serial].unit[id].value = st;
            // console.log( data["xtg402"][serial].unit[id])
            // localStorage.setItem("cardData",JSON.stringify(data))
            // var params = {
            //     "type":"setdev",
            //     "xtg402": [
            //         {
            //             "serial":serial,
            //             "unit":[{
            //                 "id": id,
            //                 "value": st
            //             }]
            //         }
            //     ]
            // }
            // this.$http.post(this.$baseUrl, params).then((res)=>{
                
            // })
        
        }
    },
     // 清除定时器
    beforeDestroy() {
    },
}
</script>

<style scoped>


/deep/ .el-icon-arrow-left {
    margin-left: -110px !important;
}
/deep/ .el-icon-arrow-right{
    margin-right: -110px !important;
}
/deep/ .el-carousel__indicators{
    display: none;
}
.card_padding .item{
   width: 50%;
    height: 25px;
    float: left;
    padding-left: 35px;
    font-size: 16px;
    margin: 45px 0 30px;
}
.card_padding .item .overflowHidden{
    width: 110px;
    float: left;
}
.card_padding{
    padding: 0px 10px 10px 10px;
}
/deep/ .el-carousel__arrow--left {
    height: 150px !important;
    width: 110px !important;
    border-radius: 0;
    background: none;
}
/deep/ .el-carousel__arrow--right{
    border-radius: 0;
    background: none;
    width: 30px !important;
    right: 60px !important;
    height: 30px !important;
}
</style>